<template>
  <div class="page-container">
    <el-row>
      <!--工具栏-->
      <div class="toolbar" style="padding-top:20px;padding-left:15px;">
        <el-form :inline="true" :model="filters" :size="size">
          <el-row class="search-button button20">
            <el-form-item>
              <kt-button
                icon="fa fa-plus"
                :label="$t('action.add')"
                type="primary"
                @click="handleAdd"
              />
            </el-form-item>
          </el-row>
        </el-form>
      </div>
    </el-row>
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="订单自动取消" name="first"></el-tab-pane>
      <el-tab-pane label="订单自动签收" name="second"></el-tab-pane>
      <el-tab-pane label="订单自动完成" name="third"></el-tab-pane>
      <el-tab-pane label="售后单自动审核" name="fourth"></el-tab-pane>
    </el-tabs>
    <el-row>
      <!--数据列表-->
      <cy-table
        :height="350"
        :highlightCurrentRow="true"
        :content="pageResult"
        :totalSize="totalSize"
        :columns="filterColumns"
        :showSelection="false"
        :showBatchDelete="false"
        @findPage="findPage"
        @handleEdit="handleEdit"
        @handleDelete="handleDelete"
        ref="CyTable"
      ></cy-table>
    </el-row>
    <!--新增编辑界面-->
    <el-dialog
      :title="operation?'新增':'编辑'"
      width="40%"
      :visible.sync="editDialogVisible"
      :close-on-click-modal="false"
    >
      <el-form
        :model="dataForm"
        label-width="150px"
        :rules="dataFormRules"
        ref="dataForm"
        :size="size"
      >
        <el-row class="searchDialog-input">
          <el-form-item label="ID：" prop="id" v-if="false">
            <el-input
              v-model="dataForm.id"
              :disabled="true"
              auto-complete="off"
              placeholder="请输入ID"
            ></el-input>
          </el-form-item>
          <el-form-item v-if="tag1" label="订单来源：" prop="orderSource">
            <el-select v-model="dataForm.orderSource" style="width: 100%" placeholder="请选择">
              <el-option
                v-for="item in orderSourceOptions"
                :key="item.key"
                :label="item.value"
                :value="item.key"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item v-if="tag2" label="支付类型：" prop="payType">
            <el-select v-model="dataForm.payType" style="width: 100%" placeholder="请选择">
              <el-option
                v-for="item in payTypeOptions"
                :key="item.key"
                :label="item.value"
                :value="item.key"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item v-if="tag3" label="系统自动取消时长：" prop="cancelTime">
            <el-input-number
              v-model="dataForm.cancelTime"
              auto-complete="off"
              :min="0"
              style="width: 30%"
            ></el-input-number>&nbsp;分
          </el-form-item>
          <el-form-item v-if="tag4" label="订单触发状态：" prop="orderStatus">
            <el-select v-model="dataForm.orderStatus" style="width: 100%" placeholder="请选择">
              <el-option
                v-for="item in orderStatusOptions"
                :key="item.key"
                :label="item.value"
                :value="item.key"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item v-if="tag5" label="系统自动签收时长：" prop="cancelTime">
            <el-input-number
              v-model="dataForm.cancelTime"
              auto-complete="off"
              :min="0"
              style="width: 30%"
            ></el-input-number>&nbsp;分
          </el-form-item>
          <el-form-item v-if="tag6" label="系统自动完成时长：" prop="cancelTime">
            <el-input-number
              v-model="dataForm.cancelTime"
              auto-complete="off"
              :min="0"
              style="width: 30%"
            ></el-input-number>&nbsp;分
          </el-form-item>
          <el-form-item v-if="tag7" label="售后类型：" prop="aftersaleType">
            <el-select v-model="dataForm.aftersaleType" style="width: 100%" placeholder="请选择">
              <el-option
                v-for="item in aftersaleOptions"
                :key="item.key"
                :label="item.value"
                :value="item.key"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="应用渠道：" prop="channelId">
            <el-select v-model="dataForm.channelId" style="width: 100%" placeholder="请选择">
              <el-option
                v-for="item in channelIdOptions"
                :key="item.key"
                :label="item.value"
                :value="item.key"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align:center">
        <el-button :size="size" @click="closeB('dataForm')">{{$t('action.cancel')}}</el-button>
        <el-button
          :size="size"
          type="primary"
          @click.native="submitForm"
          :loading="editLoading"
        >{{$t('action.submit')}}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import CyTable from "@/views/Core/ProductTable";
import KtButton from "@/views/Core/KtButton";
import { format } from "@/utils/datetime";
import TableColumnFilterDialog from "@/views/Core/TableColumnFilterDialog";
export default {
  components: {
    KtButton,
    CyTable,
    TableColumnFilterDialog
  },
  data() {
    return {
      aftersaleOptions: [
        { key: "1", value: "仅退款未发货" },
        { key: "2", value: "仅退款已发货" },
        { key: "3", value: "退款退货" }
      ],
      orderStatusOptions: [],
      payTypeOptions: [
        { key: "1", value: "网上支付" },
        { key: "2", value: "线下支付" }
      ],
      channelIdOptions: [
        { key: "1", value: "BBC" },
        { key: "2", value: "天猫" },
        { key: "3", value: "京东" }
      ],
      orderSourceOptions: [
        { key: "1", value: "海淘" },
        { key: "2", value: "团购" },
        { key: "3", value: "拼单" },
        { key: "4", value: "积分" },
        { key: "5", value: "海淘直邮" },
        { key: "5", value: "普通" },
        { key: "6", value: "询价" },
        { key: "7", value: "租赁" },
        { key: "8", value: "试用" },
        { key: "9", value: "积分" },
        { key: "10", value: "扫码购" },
        { key: "11", value: "预售" },
        { key: "12", value: "赠品" },
        { key: "13", value: "砍价" },
        { key: "14", value: "拼团抽奖" },
        { key: "15", value: "餐饮" },
        { key: "16", value: "采购单" },
        { key: "17", value: "其他" }
      ],
      // orderSourceOptions:[{key:"1",value:"海淘"},{key:"2",value:"团购"},{key:"3",value:"拼单"},{key:"4",value:"积分"},{key:"5",value:"其他"}],
      activeName: "first",
      size: "small",
      /* 订单自动取消 */
      columns: [
        {
          prop: "orderSource",
          label: "订单来源",
          minWidth: 50,
          formatter: this.showOrderSource
        },
        {
          prop: "payType",
          label: "支付类型",
          minWidth: 120,
          formatter: this.showPayType
        },
        { prop: "cancelTime", label: "限时自动取消时长", minWidth: 120 },
        {
          prop: "channelId",
          label: "渠道编码",
          minWidth: 120,
          formatter: this.showChannelId
        }
      ],
      pageRequest: { pageNum: 1, pageSize: 10 },
      pageResult: [],
      totalSize: 0,
      filters: {
        tabType: 1
      },
      filterColumns: [],
      editLoading: false,
      operation: false, // true:新增, false:编辑
      editDialogVisible: false, // 新增编辑界面是否显示
      dataFormRules: {
        orderSource: [
          { required: true, message: "请输入订单来源", trigger: "change" }
        ],
        payType: [
          { required: true, message: "请输入支付类型", trigger: "change" }
        ],
        cancelTime: [
          { required: true, message: "请输入系统自动时长", trigger: "blur" }
        ],
        channelId: [
          { required: true, message: "请输入应用渠道", trigger: "change" }
        ]
      },
      dataForm: {
        id: "",
        orderSource: "",
        payType: "",
        cancelTime: "",
        channelId: ""
      },
      tag1: false,
      tag2: false,
      tag3: false,
      tag4: false,
      tag5: false,
      tag6: false,
      tag7: false
    };
  },
  mounted() {
    this.initColumns();
  },
  methods: {
    closeB(formName) {
      this.$refs[formName].resetFields();
      this.$nextTick(() => {
        this.$refs["dataForm"].clearValidate();
      });
      this.editDialogVisible = false;
    },
    //售后类型初始化
    showAftersaleType(row, column, cellValue, index) {
      if (cellValue == "1") {
        return "仅退款未发货";
      } else if (cellValue == "2") {
        return "仅退款已发货";
      } else {
        return "退款退货";
      }
    },
    //订单状态初始化
    showOrderStatus(row, column, cellValue, index) {
      if (cellValue == "1") {
        return "已发货";
      } else if (cellValue == "2") {
        return "已签收";
      }
    },
    //渠道格式化
    showChannelId(row, column, cellValue, index) {
      if (cellValue == "1") {
        return "BBC";
      } else if (cellValue == "2") {
        return "天猫";
      } else {
        return "京东";
      }
    },
    //支付来源格式化
    showOrderSource(row, column, cellValue, index) {
      if (cellValue == "1") {
        return "海淘";
      } else if (cellValue == "2") {
        return "团购";
      } else if (cellValue == "3") {
        return "拼单";
      } else if (cellValue == "4") {
        return "积分";
      } else if (cellValue == "5") {
        return "普通";
      } else if (cellValue == "6") {
        return "询价";
      } else if (cellValue == "7") {
        return "租赁";
      } else if (cellValue == "8") {
        return "试用";
      } else if (cellValue == "9") {
        return "积分";
      } else if (cellValue == "10") {
        return "扫码购";
      } else if (cellValue == "11") {
        return "预售";
      } else if (cellValue == "12") {
        return "赠品";
      } else if (cellValue == "13") {
        return "砍价";
      } else if (cellValue == "14") {
        return "拼团抽奖";
      } else if (cellValue == "15") {
        return "餐饮";
      } else if (cellValue == "16") {
        return "采购单";
      } else {
        return "其他";
      }
    },
    //支付类型格式化
    showPayType(row, column, cellValue, index) {
      if (cellValue == "1") {
        return "网上支付";
      } else {
        return "线下支付";
      }
    },
    handleClick(tab, event) {
      if (tab.name === "first") {
        (this.dataFormRules = {
          orderSource: [
            { required: true, message: "请输入订单来源", trigger: "change" }
          ],
          payType: [
            { required: true, message: "请输入支付类型", trigger: "change" }
          ],
          cancelTime: [
            { required: true, message: "请输入系统自动时长", trigger: "blur" }
          ],
          channelId: [
            { required: true, message: "请输入应用渠道", trigger: "change" }
          ]
        }),
          (this.columns = [
            {
              prop: "orderSource",
              label: "订单来源",
              minWidth: 50,
              formatter: this.showOrderSource
            },
            {
              prop: "payType",
              label: "支付类型",
              minWidth: 120,
              formatter: this.showPayType
            },
            { prop: "cancelTime", label: "限时自动取消时长", minWidth: 120 },
            {
              prop: "channelId",
              label: "渠道编码",
              minWidth: 120,
              formatter: this.showChannelId
            }
          ]),
          this.initColumns();
        this.filters.tabType = "1";
        this.findPage(this.filters);
      } else if (tab.name === "second") {
        (this.dataFormRules = {
          orderSource: [
            { required: true, message: "请输入订单来源", trigger: "blur" }
          ],
          payType: [
            { required: true, message: "请输入支付类型", trigger: "blur" }
          ],
          cancelTime: [
            { required: true, message: "请输入系统自动时长", trigger: "blur" }
          ],
          orderStatus: [
            { required: true, message: "请输入订单出发状态", trigger: "blur" }
          ],
          channelId: [
            { required: true, message: "请输入应用渠道", trigger: "blur" }
          ]
        }),
          (this.columns = [
            {
              prop: "orderSource",
              label: "订单来源",
              minWidth: 50,
              formatter: this.showOrderSource
            },
            {
              prop: "payType",
              label: "支付类型",
              minWidth: 120,
              formatter: this.showPayType
            },
            {
              prop: "orderStatus",
              label: "订单触发状态",
              minWidth: 120,
              formatter: this.showOrderStatus
            },
            { prop: "cancelTime", label: "限时自动签收时长", minWidth: 120 },
            {
              prop: "channelId",
              label: "渠道编码",
              minWidth: 120,
              formatter: this.showChannelId
            }
          ]);
        this.initColumns();
        this.filters.tabType = "2";
        this.findPage(this.filters);
      } else if (tab.name === "third") {
        (this.dataFormRules = {
          orderSource: [
            { required: true, message: "请输入订单来源", trigger: "blur" }
          ],
          payType: [
            { required: true, message: "请输入支付类型", trigger: "blur" }
          ],
          cancelTime: [
            { required: true, message: "请输入系统自动时长", trigger: "blur" }
          ],
          orderStatus: [
            { required: true, message: "请输入订单出发状态", trigger: "blur" }
          ],
          channelId: [
            { required: true, message: "请输入应用渠道", trigger: "blur" }
          ]
        }),
          (this.columns = [
            {
              prop: "orderSource",
              label: "订单来源",
              minWidth: 50,
              formatter: this.showOrderSource
            },
            {
              prop: "payType",
              label: "支付类型",
              minWidth: 120,
              formatter: this.showPayType
            },
            {
              prop: "orderStatus",
              label: "订单触发状态",
              minWidth: 120,
              formatter: this.showOrderStatus
            },
            { prop: "cancelTime", label: "限时自动签收时长", minWidth: 120 },
            {
              prop: "channelId",
              label: "渠道编码",
              minWidth: 120,
              formatter: this.showChannelId
            }
          ]);
        this.filters.tabType = "3";
        this.initColumns();
        this.findPage(this.filters);
      } else if (tab.name === "fourth") {
        (this.dataFormRules = {
          aftersaleType: [
            { required: true, message: "请输入订单来源", trigger: "change" }
          ],
          channelId: [
            { required: true, message: "请输入支付类型", trigger: "change" }
          ]
        }),
          (this.columns = [
            {
              prop: "aftersaleType",
              label: "售后类型",
              minWidth: 50,
              formatter: this.showAftersaleType
            },
            {
              prop: "channelId",
              label: "应用渠道",
              minWidth: 120,
              formatter: this.showChannelId
            }
          ]);
        this.filters.tabType = "4";
        this.initColumns();
        this.findPage(this.filters);
      }
    },

    // 获取分页数据
    findPage: function(params) {
      let this_ = this;
      if (params == undefined || params == null) {
        params = {
          pageNum: this_.pageRequest.pageNum,
          pageSize: this_.pageRequest.pageSize
        };
      }
      if (this_.filters == undefined || this_.filters == null) {
        this_.filters = {};
      }
      this_.filters.start = params.pageNum;
      this_.filters.limit = params.pageSize;
      this.utils.request.queryOrderInfoSet(this_.filters, function(res) {
        if (res.data.rows.length == 0) {
          res.data.rows = [];
        }
        this_.pageResult = res.data.rows;
        this_.totalSize = Number(res.data.total);
      });
    },
    // 批量删除
    handleDelete: function(data) {
      let this_ = this;
      var ids = "";
      for (var i = 0; i < data.params.length; i++) {
        ids = ids + data.params[i].id + ",";
      }
      let param = {};

      param.ids = ids;
      if (this_.activeName == "first") {
        param.tabType = 1;
      } else if (this_.activeName == "second") {
        param.tabType = 2;
      } else if (this_.activeName == "third") {
        param.tabType = 3;
      } else if (this_.activeName == "fourth") {
        param.tabType = 4;
      }
      this.utils.request.deleteOrderInfoSet(param, this.deletInfoBack);
    },
    // 删除修改回调
    deletInfoBack: function(data) {
      if (data.code == "0000") {
        this.$message({ message: "操作成功", type: "success" });
      } else {
        this.$message({ message: "操作失败, " + data.msg, type: "error" });
      }
      this.findPage();
    },
    // 显示新增界面
    handleAdd: function() {
      this.$nextTick(() => {
        this.$refs["dataForm"].clearValidate();
      });
      switch (this.activeName) {
        case "first":
          this.tag1 = true;
          this.tag2 = true;
          this.tag3 = true;
          this.tag4 = false;
          this.tag5 = false;
          this.tag6 = false;
          this.tag7 = false;
          this.dataForm = {
            id: "",
            orderSource: "",
            payType: "",
            cancelTime: "",
            channelId: ""
          };
          break;
        case "second":
          this.tag1 = true;
          this.tag2 = true;
          this.tag3 = false;
          this.tag4 = true;
          this.tag5 = true;
          this.tag6 = false;
          this.tag7 = false;
          this.dataForm = {
            id: "",
            orderSource: "",
            payType: "",
            cancelTime: "",
            channelId: "",
            orderStatus: ""
          };
          this.orderStatusOptions = [{ key: "1", value: "已发货" }];
          break;
        case "third":
          this.tag1 = true;
          this.tag2 = true;
          this.tag3 = false;
          this.tag4 = true;
          this.tag5 = false;
          this.tag6 = true;
          this.tag7 = false;
          this.dataForm = {
            id: "",
            orderSource: "",
            payType: "",
            cancelTime: "",
            channelId: "",
            orderStatus: ""
          };
          this.orderStatusOptions = [{ key: "1", value: "已签收" }];
          break;
        case "fourth":
          this.tag1 = false;
          this.tag2 = false;
          this.tag3 = false;
          this.tag4 = false;
          this.tag5 = false;
          this.tag6 = false;
          this.tag7 = true;
          this.dataForm = {
            id: "",
            channelId: "",
            aftersaleType: ""
          };
          break;
      }

      this.editDialogVisible = true;
      this.operation = true;
      this.editLoading = false;
    },
    // 显示编辑界面
    handleEdit: function(params) {
      this.$nextTick(() => {
        this.$refs["dataForm"].clearValidate();
      });
      switch (this.activeName) {
        case "first":
          this.tag1 = true;
          this.tag2 = true;
          this.tag3 = true;
          this.tag4 = false;
          this.tag5 = false;
          this.tag6 = false;
          this.tag7 = false;
          break;
        case "second":
          this.tag1 = true;
          this.tag2 = true;
          this.tag3 = false;
          this.tag4 = true;
          this.tag5 = true;
          this.tag6 = false;
          this.tag7 = false;
          break;
        case "third":
          this.tag1 = true;
          this.tag2 = true;
          this.tag3 = false;
          this.tag4 = true;
          this.tag5 = false;
          this.tag6 = true;
          this.tag7 = false;
          break;
        case "fourth":
          this.tag1 = false;
          this.tag2 = false;
          this.tag3 = false;
          this.tag4 = false;
          this.tag5 = false;
          this.tag6 = false;
          this.tag7 = true;
          break;
      }
      this.editDialogVisible = true;
      this.operation = false;
      this.editLoading = false;
      this.$nextTick(function() {
        this.dataForm = Object.assign({}, params.row);
      });
    },
    // 编辑
    submitForm: function() {
      let this_ = this;
      this.$refs.dataForm.validate(valid => {
        if (valid) {
          this.$confirm("确认提交吗？", "提示", {}).then(() => {
            this.editLoading = true;

            let params = Object.assign({}, this.dataForm);
            if (this_.activeName == "first") {
              params.tabType = 1;
            } else if (this_.activeName == "second") {
              params.tabType = 2;
            } else if (this_.activeName == "third") {
              params.tabType = 3;
            } else {
              params.tabType = 4;
            }
            this.utils.request.editOrderInfoSet(params, this.editInfoBack);
          });
        }
      });
    },
    // 新增修改回调
    editInfoBack: function(data) {
      if (data.code == "0000") {
        this.$message({ message: "操作成功", type: "success" });
      } else {
        this.$message({ message: "操作失败, " + data.msg, type: "error" });
      }
      this.editDialogVisible = false;
      this.findPage();
      this.operation = false;
      this.editLoading = true;
      this.$refs["dataForm"].resetFields();
    },

    // 重置
    resetForm(formName) {
      if (this.$refs[formName] != undefined) {
        this.$refs[formName].resetFields();
      }
    },
    // 时间格式化
    dateFormat: function(row, column, cellValue, index) {
      return format(row[column.property]);
    },

    initColumns: function() {
      var temp = [];
      $.each(this.columns, function(key, val) {
        temp.push(val);
      });
      this.filterColumns = temp;
    }
  }
};
</script>


<style scoped lang='scss'>
</style>
